<script src="<?php echo base_url("assets/js/jquery.slugify.js")?>"></script>
<script src="<?php echo base_url("assets/js/jquery.datetimepicker.js")?>"></script>
<link rel="stylesheet" type="text/css" href="<?php echo base_url("assets/css/jquery.datetimepicker.css")?>"/>
<style>
	label{font-weight:bold}
	.btn-back{margin-left:15px;}
	.tool_search{float:left;width:25%;margin-right:20px}
	.tool_search select{width:100%}
	.tool_search input{width:95%}
	.clear{clear:both}
	.btn_search{float:left;margin-top:20%}
	.result_search{float:left;width:40%;}
</style>
<script>
$().ready(function(){
	generate_slug = function(input_form, output_form, space_character, disallow_dashes){
		space_character = space_character || '-';
		$(input_form).slugify({ slug: output_form, type: space_character });
	} 
	$("input[name='title']").on("keyup",function(e) {
		generate_slug($(this), $('#slug'));
	});
	$("#delete_img").click(function(){
		if(confirm("Bạn có thật sự muốn xóa hình này")){
			return true;	
		}
		return false;
	});
	$(".btn-back").click(function(){
		window.location = "<?php echo site_url("admin/blogs")?>";
		return false;
	});
	/*$( ".datetimepicker" ).datepicker({
	  "dateFormat":"dd/mm/yy",
	  "changeYear":true,
	  "changeMonth":true,
	  "monthNamesShort": [ "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
	  "yearRange":"2010:+1",
	  defaultDate: new Date() 
	});*/
	$( ".datetimepicker" ).datetimepicker({
		format:"d/m/Y - H:i",
	});
}); 
</script>
<div class="page-header">
	<h1>Blogs <?php echo empty($model["title"])?"":$model["title"]?></h1>
</div>
<?php echo form_open_multipart($this->config->item('admin_folder').'/blogs/edit/'.$model["id"]); ?>
<div class="tabbable">
	<ul class="nav nav-tabs">
    	<li class="active"><a href="#blogs">Blogs</a></li>
        <li><a href="#sp">Sản phẩm</a></li>
    </ul>
    <div class="tab-content">
    	<div class="form-actions"><button class="btn btn-primary">Lưu</button> <button class="btn btn-back">Trở về</button></div>
        <div class="tab-pane active" id="blogs">
        <fieldset>
            <label for="name">Tiêu đề tin</label>
            <?php echo form_input(array("name"=>"title","value"=>$model["title"],"class"=>"span12","id"=>"title")) ?>
            <label for="name">Liên kết tĩnh</label>
             <?php echo form_input(array("name"=>"slug","value"=>$model["slug"],"class"=>"span12","id"=>"slug","readonly"=>"readonly")) ?>
             <?php if(!empty($category)){echo '<label> Danh mục tin </label>'; 
					echo form_dropdown("cat_id",$category,$model["cat_id"],"class='span4'");
			 }?>
            <label for="status"> Trạng thái</label>
            <?php echo form_dropdown("active",array(1=>"bật",2=>"tắt"),$model["active"],"class='span4'")?>
			<label for="status"> Ngày bắt đầu </label>
            <?php echo form_input(array("name"=>"date_start","value"=>!empty($model["date_start"])?date("d/m/Y - H:i",$model["date_start"]):"","class"=>"span4 datetimepicker"))?>
			<label for="status"> Ngày kết thúc </label>
            <?php echo form_input(array("name"=>"date_end","value"=>!empty($model["date_end"])?date("d/m/Y - H:i",$model["date_end"]):"","class"=>"span4 datetimepicker"))?>
            <label> Hình ảnh </label>
            <input type="file" name="file" />
            <?php if(!empty($model["image"])){?>
            	<img src="<?php echo base_url("uploads/images/thumbnails/blogs/".$model["image"])?>" />
                <a id="delete_img" href="<?php echo site_url("admin/blogs/delete_img/".$model["id"]) ?>">xóa ảnh</a>
            <?php }?>
             <?php $i=0;$tags="";if(!empty($tag_name)) foreach($tag_name as $item){ if($i!=0) $tags .= ",";$tags .= $item->name;$i=1;}?>
            <label for="status"> Tags(cách nhau bởi dấu phẩy)</label>
            <?php echo form_input(array("name"=>"tags","value"=>$tags,"class"=>"span4"))?>
            <label>Meta Keyword</label>
            <?php echo form_input(array("name"=>"keywords","value"=>$model["keywords"], "style"=>"width:98%"))?>
             <label style="margin-top:10px"> Mô tả ngắn </label>
            <?php echo form_textarea(array("name"=>"description","value"=>$model["description"],"class"=>"span12")) ?>
            <label> Nội dung </label>
            <?php echo form_textarea(array("name"=>"bodyhtml","value"=>html_entity_decode($model["bodyhtml"]),"class"=>"redactor","cols"=>40,"rows"=>10)) ?>
        </fieldset>
        </div>
        <div class="tab-pane" id="sp"> 
        	<div class="tool_search">
       			<input type="text"  placeholder="Tên sản phẩm" id="product_name"/><br />
            	<select size="25" id="product" style="height:500px" name=""></select>
            </div>
            <div class="btn_search">
            	<button id="add_product"> Thêm sản phẩm </button>
            </div>
            <div class="result_search">
            	<table class="table table-striped">
                	<tbody>
                    		<?php if($model["product_id"]){ $product = $this->article_m->get_blogs_product($model["product_id"]);if(!empty($product)) foreach($product as $item){?>
                            <tr id="related_product_<?php echo $item->id?>">
                            	<td><input type="hidden" name="related_products[]" value="<?php echo $item->id?>" /><?php echo $item->name?></td>
                                <td><a class="btn btn-danger pull-right btn-mini" href="#" onclick="remove_related_product('<?php echo $item->id?>'); return false;"><i class="icon-trash icon-white"></i> Xóa</a></td>
                            </tr>
                            <?php }}?>
                    </tbody>
                </table>
            </div>
            <div class="clear"></div>
        </div>
        <div class="form-actions"><button class="btn btn-primary">Lưu</button> <button class="btn btn-back">Trở về</button></div>
    </div>
</div>
<script language="javascript">
	$(".nav-tabs li").click(function(){
		$(".tab-pane").removeClass("active");
		$(".nav-tabs li").removeClass("active");
		$(this).addClass("active");
		var $id_tab = $(this).find("a").attr("href");
		$($id_tab).addClass("active");
		return false;
	});
	$("#product_name").keyup(function(){
		var name_product = $(this).val();
		$.ajax({
			url:"<?php echo site_url("admin/products/product_autocomplete")?>",
			type:"POST",
			data:{name:name_product,limit:20},
			success:function(result){
				result = $.parseJSON(result);
				$option = ""; 
				$.each(result, function(index, value){
					if($('#related_product_'+index).length == 0 && $('#product_name').val() != null){
						$option += '<option id="product_item_'+index+'" value="'+index+'">'+value+'</option>';
					}
				});
				$("#product").html($option);
			}
		});							   
	});
	$("#add_product").click(function(){
		var value = $("#product option:selected").val();
		var name  = $("#product option:selected").html();
		if(value != null && value != ""){
			var html = '<tr id="related_product_'+value+'"><td><input type="hidden" name="related_products[]" value="'+value+'"/>'+name+'</td><td><a class="btn btn-danger pull-right btn-mini" href="#" onclick="remove_related_product('+value+'); return false;"><i class="icon-trash icon-white"></i> Xóa</a></td></tr>';
			$(".table-striped").append(html);
			$("#product option:selected").remove();
		}
		return false;					
	});
	function remove_related_product(id){
		if(confirm('Bạn có muốn bỏ sản phẩm liên quan này không?')){
			$('#related_product_'+id).remove();
			$("#product_name").trigger("keyup");
		}
	}

</script>